<template>
  <div id="app">
    <transition v-if="isRouterAlive">
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive" class="view"></router-view>
      </keep-alive>
    </transition>
    <transition v-if="isRouterAlive">
      <router-view v-if="!$route.meta.keepAlive" class="view"></router-view>
    </transition>
    <bind-clinic :open="open" @submit="reload"/>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import BindClinic from "@/components/bindClinic/bindClinic";
export default {
  name: "App",
  components: { BindClinic },
  data() {
    return {
      isRouterAlive: true,
      open: false
    };
  },
  computed: {
    ...mapGetters(["userInfo"])
  },
  watch: {
    $route(to, from) {
      // console.log('userInfo')
      // console.log(this.userInfo)\
      
      if (this.userInfo && this.userInfo.clinicId === 0) {
        this.open = true;
      } else {
        this.open = false;
      }
    }
  },
  methods: {
    reload() {
      this.isRouterAlive = false;
      this.$nextTick(() => (this.isRouterAlive = true));
    }
  }
};
</script>
<style lang='scss'>
.v-enter,
.v-leave-to {
  transform: translate3d(100%, 0, 0);
}

.view {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 200;
  transition: all 0.3s;
}
</style>
